<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav flex-justify-start">
      <a @click="fn.back()" href="javascript:void(0)"><img class="back-btn" src="../../../static/images/back.png"></a>
      <h1 class="mui-title">我的信息</h1>
    </header>
    <div class="mui-page-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell mine-header-box flex-between-center">
              头像
              <span class="mui-pull-right">
                  <img class="head-img mui-action-preview" v-if="userInfo.photo && userInfo.photo.length>0" :src="fn.getImgUrl(userInfo.photo)" alt="">
                  <img class="head-img mui-action-preview" v-if="!userInfo.photo || userInfo.photo.length<1" src="../../../static/images/default.jpg" alt="">
                  <cube-upload
                    action=""
                    :simultaneous-uploads="1"
                    @files-added="uploadFile"
                    @file-success="fileSuccess"
                  />
              </span>
            </li>
            <li class="mui-table-view-cell list-item">
              姓名<span class="mui-pull-right">{{userInfo.fullname}}</span>
            </li>
            <li class="mui-table-view-cell list-item">
              入党时间<span class="mui-pull-right">{{formateDate(userInfo.partyMemberModel.joinPartyDate)}}</span>
            </li>
            <li class="mui-table-view-cell list-item">
              党员类型<span class="mui-pull-right">{{userInfo.partyMemberModel.partyMemberTypeLabel}}</span>
            </li>
            <li class="mui-table-view-cell list-item">
              所属支部<span class="mui-pull-right">{{userInfo.partyMemberModel.partyGroupName}}</span>
            </li>
            <li class="mui-table-view-cell list-item">
              手机号码<span class="mui-pull-right">{{userInfo.mobile}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import moment from 'moment'
  export default {
    name: 'setting',
    data () {
      return {
        fn: tools,
        action: {
          target: api.updFiles,
          fileName: 'headImg',
          data: {
            appKeyId: '',
            userId: ''
          }
        },
        userInfo: this.$store.state.userInfo,
        data: {}
      }
    },
    methods: {
      fileSuccess (file) {
        if (file.response.code !== 200) {
          return tools.alert(file.response.msg)
        }
        console.log(file)
      },
      uploadFile (file) {
        let formData = new FormData()
        formData.append('file', file[0])
        loginService.updFiles(formData).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          let data = res.data[0]
          this.editUserInfo(data.fileId)
        })
      },
      editUserInfo (photo) {
        let data = {
          photo: photo,
          userId: tools.getUserInfo().userId
        }
        loginService.editUserInfo(data).then(res => {
          if (res.code === 200) {
            this.getUserInfo()
          }
        })
      },
      formateDate (str) {
        return moment(str).format('YYYY-MM-DD')
      },
      getUserInfo () {
        let token = tools.getToken()
        loginService.getMyUserInfo(token).then((userinfo) => {
          if (userinfo.code === 200) {
            if (userinfo.data.partyMemberModel === null) {
              return tools.tip('此用户信息不完整')
            }
            this.$localStorage.set('userInfo', userinfo.data)
            this.$store.state.userInfo = userinfo.data
            this.userInfo = userinfo.data
          } else {
          }
        })
      }
    }
  }
</script>

<style scoped>
.cube-upload {
  position: absolute;
  top: 0;
  opacity: 0;
}
</style>
